<template>
	<view>
		<view class="pore" style="z-index: 999;">
			<u-navbar title="办事" bgColor="transparent" autoBack :titleStyle="{'color':'transparent'}">
			</u-navbar>
		</view>
		<view class="uni-margin-wrap pore draw" id="ban" v-if="ban.imageUrl">
			<image :src="api_host + ban.imageUrl" mode="widthFix" class="width100 draw"></image>
			<view class="ban-logo">
				<view class="c343 f46 draw">{{ban.title}}</view>
				<view class="c343 f26 draw mt10">
					<view v-for="(item,index) in ban.synopsis.split('\n')">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="ml30 mr30 content-box pore">
			<view class="bgFff p10 radius50 flex-jus" @click="nologinJump('/pages/search/index?type=thing')">
				<u-search placeholder="输入你要找的办事" disabled v-model="keyword" clearabled bgColor="#fff"
					:showAction="false"></u-search>
				<view>
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}" shape="circle"
						@click="">搜索</u-button>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="flex-jus">
				<text class="bold c343">最新政策</text>
				<u-icon name="arrow-right" color="#333" size="12" label="更多" labelSize="12" labelPos="left"
					@click="nologinJump('/foodpages/things/list')"></u-icon>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff p20 radius50" v-if="listData.length > 0">
				<view class="f26 c343 textoverflow mb20 mt20" v-for="(item,index) in listData" :key="index"
					@click="nologinJump('/foodpages/things/detail?id='+item.id)">
					【{{item.zoneCategory.name}}】{{item.title}}</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="">
				<text class="bold c343">特色专题</text>
			</view>
			<u-gap height="10"></u-gap>
			<view>
				<view class="zt-item pore mb20" v-for="(item,index) in ztList" :key="index">
					<view class="bg">
						<image :src="api_host + item.banner" mode="widthFix" class="width100">
						</image>
					</view>
					<view class="zt-box">
						<view class="p30">
							<view class="bold italic-text" :style="{'color':item.colorValue}">{{item.zoneTitle}}</view>
							<u-gap height="20"></u-gap>
							<view class="flex-jus">
								<view :class="item.children.length > 1? 'flex1 mr10':''"
									v-for="(item2,index2) in item.children" :key="index2">
									<u-button shape="circle" :color="item.colorValue"
										@click="nologinJump('/foodpages/things/zone?id='+item2.id+'&name='+item2.zoneTitle)"
										:customStyle="{'fontSize':'24rpx','height':'70rpx'}">{{item2.zoneTitle}}</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="10"></u-gap>
	</view>
</template>

<script>
	import {
		getBanners
	} from '@/common/api_user.js'
	import {
		getThingshome
	} from '@/common/api_things.js'
	export default {
		name: '',
		data() {
			return {
				ban:{},
				keyword: '',
				listData: [],
				ztList: []
			}
		},
		onLoad(option) {
			this.getBanners()
			this.getThingshome()
		},
		methods: {
			async getBanners() {
				uni.showLoading({
					mask: true
				})
				const res = await getBanners({
					affiliation: '6'
				})
				if (res.code == 200) {
					this.ban = res.data[0]
				}
				uni.hideLoading()
			},
			async getThingshome() {
				uni.showLoading({
					mask: true
				})
				const res = await getThingshome()
				if (res.code == 200) {
					const {
						policys,
						treeTypes
					} = res.data
					this.listData = policys
					this.ztList = treeTypes
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F7FF;
	}

	.ban-logo {
		position: absolute;
		top: 35%;
		left: 50rpx;
	}

	.content-box {
		margin-top: -80rpx;
	}

	.zt-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>